<template>
	<div class="favorites-page">
		<!-- 使用 a-card 包裹 -->
		<a-card title="我的收藏" :body-style="{ padding: '10px' }">
			<div class="favorites-grid">
				<!-- 房源卡片循环 -->
				<div
					class="favorite-item"
					v-for="(house, index) in favorites"
					:key="house.id"
					@click="goToDetails(house.id)"
				>
					<img :src="house.imageUrls[0]" alt="房源图片" class="favorite-img" />
					<!-- 标题等信息 -->
					<div class="favorite-info">
						<text class="favorite-title">{{ house.title }}</text>
					</div>
					<!-- 租金，右下角绝对定位 -->
					<text class="favorite-price">￥{{ house.price }}</text>
				</div>
			</div>

			<!-- 分页组件：右对齐 -->
			<a-flex justify="flex-end" class="pagination">
				<a-pagination
					size="small"
					@change="onPageChange"
					@showSizeChange="onPageSizeChange"
					:pageSizeOptions="['10', '20', '50', '100']"
					v-model:current="pageNo"
					v-model:page-size="pageSize"
					:total="total"
					:show-total="(total, range) => `${range[0]}-${range[1]} 共 ${total} 条`"
					:locale="{ items_per_page: '条/页' }"
				/>
			</a-flex>
		</a-card>
	</div>
</template>

<script>
import userApi from "@/api/userApi";

export default {
	name: 'MyFavorites',
	data() {
		return {
			favorites: [],
			pageNo: 1,
			pageSize: 6,
			total: 0
		};
	},
	created() {
		this.fetchFavorites();
	},
	methods: {
		fetchFavorites() {
			userApi.getFavorites(this.pageNo, this.pageSize)
				.then(res => {
					if (res.code === 200) {
						this.favorites = res.data.houses || [];
						this.total = res.data.total;
					} else {
						console.error('获取收藏房源失败:', res.message);
					}
				})
				.catch(err => {
					console.error('接口错误', err);
				});
		},
		// 切换页码
		onPageChange(page) {
			this.pageNo = page;
			this.fetchFavorites();
		},
		// 切换 pageSize
		onPageSizeChange(current, size) {
			this.pageNo = current;
			this.pageSize = size;
			this.fetchFavorites();
		},
		// 点击房源跳转详情
		goToDetails(houseId) {
			window.open(`/house-details/${houseId}`, '_blank');
		}
	}
};
</script>

<style scoped>
.favorites-page {
	max-width: 960px;
	margin: 0 auto;
}


.favorites-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 一行2列 */
	gap: 1rem;
	margin-bottom: 20px;
}

.favorite-item {
	border: 1px solid #f0f0f0;
	border-radius: 4px;
	overflow: hidden;
	background-color: #fff;
	cursor: pointer;
}


.favorite-img {
	width: 100%;
	flex: 0 0 60%;
	height: 180px;
	object-fit: cover;
}

.favorite-info {
	padding: 10px;
	height: 50px;
}

.favorite-title {
	font-size: 16px;
	font-weight: bold;
	margin: 0 0 8px;
	color: #333;
}

.favorite-price {
	font-size: 20px;
	font-weight: bold;
	color: #f60;
	margin-left: 75%;
}

.pagination {
	text-align: center;
	margin-top: 20px;
}

.pagination .page-info {
	margin: 0 10px;
	font-size: 16px;
}
</style>
